<template>
  <div class="msite">
    <Topbar title="商家列表" :gobackEnabled="true" :profileEnabled="true"/>

    <!--店铺分类-->
    <div class="nav">
      <div v-if="foodTypesGroup.length > 0" class="swiper-container food-types-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(foodTypes, i) in foodTypesGroup" :key="i">
            <router-link
              class="food-types-link"
              v-for="(footType, i) in foodTypes"
              :key="i"
              :to="{path: '/food', query: {title: footType.title, restaurant_category_id: getCategoryId(footType.link, footType)}}"
            >
              <figure>
                <img :src="imgBaseUrl + footType.image_url">
                <figcaption>{{footType.title}}</figcaption>
              </figure>
            </router-link>
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>
      <img v-else src="../../assets/food-types-placeholder.svg" class="food-types-placeholder animation_opactiy">
    </div>

    <!--店铺列表-->
    <div class="list">
      <div class="list-title">
        <i class="icon"></i>
        <span class="span">附近商家</span>
      </div>
      <ShopList/>
    </div>

    <BottomNav/>
  </div>
</template>
<script>
import Topbar from '../../components/Topbar';
import BottomNav from '../../components/BottomNav';
import ShopList from '../../components/ShopList';
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.css';
import { getFoodTypes } from '../../etc/datas';
import { mapActions, mapState } from 'vuex';
export default {
  data() {
    return {
      title: '请选择地址...', // 地址文本
      foodTypesGroup: [], // 食品分类分组
      imgBaseUrl: 'https://fuss10.elemecdn.com' // 图片路径前缀
    };
  },
  beforeMount() {
    this.initPosition(this);
    this.initFoodTypesGroup();
  },
  mounted() {},
  computed: {
    ...mapState(['position'])
  },
  methods: {
    ...mapActions(['initPosition']),
    async initFoodTypesGroup() {
      getFoodTypes(data => {
        this.foodTypesGroup = [];
        while (data.length) {
          this.foodTypesGroup.push(data.splice(0, 8));
        }

        // 等渲染完成在执行组件初始化
        setTimeout(() => {
          new Swiper('.food-types-swiper', {
            pagination: {
              el: '.food-types-swiper .swiper-pagination'
            },
            loop: true
          });
        });
      }, this.position);
    },
    // 解码url地址，求去restaurant_category_id值
    getCategoryId(url, footType) {
      let urlData = decodeURIComponent(
        url.split('=')[1].replace('&target_name', '')
      );
      if (/restaurant_category_id/gi.test(urlData)) {
        return JSON.parse(urlData).restaurant_category_id.id;
      } else {
        return '';
      }
    }
  },
  components: {
    Topbar,
    ShopList,
    BottomNav
  }
};
</script>
<style lang="scss">
@import '../../styles/mixin';

.msite {
  .nav {
    background-color: #fff;
    border-bottom: 0.025rem solid $bc;
    height: 8.5rem;
  }
  .swiper-container {
    @include wh(100%, auto);
    padding-bottom: 0.6rem;
  }
  .swiper-pagination {
    bottom: 0.2rem;
  }
  .swiper-slide {
    display: flex;
    flex-wrap: wrap;
  }
  .food-types-link {
    width: 25%;
    padding: 0.3rem 0rem;
    @include fj(center);
    figure {
      img {
        margin-bottom: 0.3rem;
        @include wh(1.8rem, 1.8rem);
      }
      figcaption {
        text-align: center;
        @include sc(0.55rem, #666);
      }
    }
  }
  .list {
    margin-top: 0.4rem;
    border-top: 0.025rem solid $bc;
    background-color: #fff;
  }
  .list-title {
    .icon {
      fill: #999;
      margin-left: 0.6rem;
      vertical-align: middle;
      @include wh(0.6rem, 0.6rem);
    }
    span {
      color: #999;
      @include font(0.55rem, 1.6rem);
    }
  }
}
</style>